<template>
  <div>
    <el-card>
      <div class="flex" style="width: 300px">
        <el-input
          v-model="searchForm.keyword"
          placeholder="请输入管理员昵称"
          @keyup.enter="getData"
        ></el-input>
        <el-button type="primary" @click="getData">搜索</el-button>
        <el-button type="primary" @click="resetSearchForm">重置</el-button>
      </div>
      <div class="noptice-header flex items-center justify-between">
        <el-button type="primary" size="small" @click="createClick"
          >新增</el-button
        >
        <el-button type="primary" size="small" @click="refresh">
          <el-icon>
            <Refresh />
          </el-icon>
        </el-button>
      </div>
      <el-table :data="tableList">
        <el-table-column label="管理员" prop="">
          <template #default="{ row }">
            <div class="flex">
              <el-avatar :size="40" :src="row.avatar">
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
              <div class="ml-5">
                <h6>{{ row.username }}</h6>
                <span>ID：{{ row.id }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="所属管理员">
          <template #default="{ row }">
            <span>{{ row.role.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              @change="statusChange(row)"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              text
              type="primary"
              size="small"
              @click="editNoticeClick(scope.row)"
              >修改</el-button
            >
            <el-popconfirm
              title="是否要删除该管理员？"
              confirmButtonText="确认"
              cancelButtonText="取消"
              @confirm="handleDelete(scope.row.id)"
            >
              <template #reference>
                <el-button text type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex items-center justify-center mt-3">
        <el-pagination
          background
          layout="prev, pager,next"
          :total="total"
          :current-page="page"
          :page-size="limit"
          @current-change="changePage"
        />
      </div>
    </el-card>

    <Drawer
      ref="DrawerRef"
      :title="title === 'add' ? '添加管理员' : '修改管理员'"
      @submit="submit"
    >
      <el-form ref="formRef" :model="fromData" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="fromData.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="fromData.password"
            placeholder="请输入密码"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <ChooseImage v-model="fromData.avatar"></ChooseImage>
        </el-form-item>
        <el-form-item label="所属管理员" prop="role_id">
          <el-select v-model="fromData.role_id" placeholder="请选择所属管路员">
            <el-option
              v-for="item in roles"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            >
              {{ item.name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="">
          <el-switch
            v-model="fromData.status"
            @change="statusChange(row)"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
      </el-form>
    </Drawer>
  </div>
</template>

<script setup>
import Drawer from "@/components/Drawer/index.vue";
import ChooseImage from "@/components/ChooseImage/ChooseImage.vue";
import {
  getManagerList,
  changStatus,
  editManager,
  addManager,
  delManager,
} from "@/api/manager";
import { ref } from "vue";
import { useInitTable, useInitForm } from "@/composables/useCommon.js";

let roles = ref([]); // 管理员列表

const {
  tableList,
  page,
  total,
  limit,
  searchForm,
  getData,
  resetSearchForm,
  changePage,
  statusChange,
  handleDelete,
  refresh,
} = useInitTable({
  searchForm: {
    keyword: "",
  },
  getList: getManagerList,
  status: changStatus,
  del: delManager,
  onGetListSuccess: (res) => {
    total.value = res.data.totalCount;
    roles.value = res.data.roles;
    tableList.value = res.data.list;
  },
});

const {
  fromData,
  editId,
  title,
  formRef,
  rules,
  DrawerRef,
  createClick,
  resetForm,
  submit,
  editNoticeClick,
} = useInitForm({
  fromData: {
    username: "",
    password: "",
    role_id: "",
    status: 1,
    avatar: "",
  },
  create: addManager,
  updata: editManager,
  getData: getData,
});
</script>
